<template>
	<view class="container">
		<view class="tui-wallet__box">
			<view class="tui-content__box tn-margin-top tn-padding-xs">
				<view class=""
					style="padding: 0rpx 30rpx;display: flex;justify-content: space-between;align-items: center;">
					<view class="tui-my__assets">
						<text>账号信息</text>
						<image @tap="toggle" mode="widthFix"
							:src="'https://oss.taoding1688.com/static/uniapp/static/images/mall/wallet/'+(isShow?'img_show_3x.png':'img_hide_3x.png')">
						</image>
					</view>
				</view>
				<view class="tn-padding-xs tn-no-margin-top-xs"
					style="display: flex;justify-content: space-between;align-items: center;padding: 0rpx 20rpx">
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;" v-if="isShow">
							{{ userInfos.commission }}
						</view>
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;font-weight: bold;" v-else><text
								class="tui-text__large">****</text></view>
					</view>
					<view class="" style="display: flex;">
						<view class=""
							style="margin: 0 10rpx;background: #ffffff;padding: 10rpx 30rpx;border-radius: 30rpx;font-size: 26rpx;color: #e9b461;"
							@click="withdraw">
							提现</view>
						<view class=""
							style="margin: 0 10rpx;border: 1rpx solid #fff;padding: 10rpx 30rpx;border-radius: 30rpx;font-size: 26rpx;color: #fff;"
							@click="downPopup">
							转余额</view>
					</view>
				</view>
				<view class="tn-padding-xs tn-no-margin-top-xs" style="display: flex;align-items: center;">
					<view class=""
						style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;margin: 0 70rpx 0 15rpx;">
						<text class="tui-my__assets">待入账佣金</text>
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;width: 100%;" v-if="isShow">
							{{ agents.pending_reward}}
						</view>
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;text-align: left;width: 100%;"
							v-else>****</view>
					</view>
					<view class=""
						style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
						<text class="tui-my__assets">可提现佣金</text>
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;" v-if="isShow">
							{{ userInfos.commission }}
						</view>
						<view class="tn-padding-xs" style="color: #fff;font-size: 44rpx;text-align: left;width: 100%;"
							v-else>****</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tn-padding-xs tn-margin-top-sm"
			style="padding: 0 30rpx;display: flex;justify-content: space-between;align-items: center;">
			<view class=""
				style="display: flex;background: #fff;width: auto;align-items: center;padding: 10rpx 20rpx;border-radius: 30rpx;font-size: 28rpx;"
				@click="show = true">
				<view class="" style="display: flex;">
					<view class="" style="color: #666666;">{{startDate}}</view>
					<view class="" v-if="endDate">~</view>
					<view class="" style="color: #666666;" v-if="endDate">{{endDate}}</view>
				</view>
				<text class="tn-icon-down-triangle" style="color: #999999;margin: 0 10rpx;"></text>
			</view>
			<view class="" style="font-size: 24rpx;color: #999999;">
				<view class="" style="margin: 20rpx 0;">总收入￥{{ listData.income && listData.income.toFixed(2) || 0 }}</view>
				<view class="" style="margin: 20rpx 0;">总支出￥{{ (-listData.expense) && (-listData.expense).toFixed(2) || 0}}</view>
			</view>


		</view>
		<tn-tabs :list="list" :isScroll="false" :current="current" name="name" @change="changeFn"
			style="background: #fff;"></tn-tabs>
		<block v-if=" listData.list && listData.list.total>0">
			<view class="list-view" style="background: #fff;padding: 30rpx;" v-for="(item,index) in lists" :key="index">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="" style="font-size: 30rpx;">{{item.event_text}}{{ item.memo ? '-' + item.memo : '' }}</view>
					<view class="" style="color: #e9b461;font-weight: bold;font-size: 34rpx;" v-if="item.amount >= 0">+{{item.amount}}</view>
					<view class="" style="color: #333333;font-weight: bold;font-size: 34rpx;" v-else>{{item.amount}}</view>
				</view>
				<view class="" style="margin-top: 20rpx;font-size: 26rpx;color: #cccccc;">{{item.createtime}}</view>
			</view>
			
		</block>
		<tn-empty v-else mode="data" style="margin-top: 180rpx;" :iconSize="150"></tn-empty>
		<!-- <tn-button @click="show = true">打开日历</tn-button> -->
		<tn-calendar v-model="show" safeAreaInsetBottom mode="range" @change="change"></tn-calendar>



		<tn-popup v-model="downPopupShow" mode="bottom">
			<view class="" style="padding: 50rpx 30rpx;">
				<view style="margin-bottom: 40rpx;font-weight: bold;font-size: 36rpx;">转余额</view>
				<view style="margin-bottom: 100rpx;color: #c2c7cf;font-size: 28rpx;">将您的佣金转到余额中继续消费</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view class="" style="display: flex;">
						<view class="" style="font-size: 40rpx;">￥</view>
						<view class=""><input type="number" v-model="num" maxlength="5" placeholder="请输入金额" style="width: 400rpx;margin: 0 10rpx;font-size: 36rpx;"></input></view>
					</view>
					<tn-button backgroundColor="#01BEFF" fontColor="#fff" size="sm" @click="all">全部</tn-button>

				</view>
				<view class="" style="height: 2rpx;background: rgba(119, 119, 119, 0.25);margin:10rpx 0 80rpx 0;">
				</view>
				<view class=""
					style="margin-top: 30rpx;background: #e9b461;;font-size: 30rpx;text-align: center;padding: 20rpx 0;color: #fff;border-radius: 50rpx;"
					@click="back">确定</view>
			</view>

		</tn-popup>

	</view>
</template>

<script>
	import {
		getUserProfile,
		getShopWalletLog,
		getShopCommissionAgentTransfer
	} from '@/apis/index.js'
	export default {
		data() {
			return {
				num:'',
				listData: [],
				downPopupShow: false,
				list: [{
						name: '全部',
						value: 'all',
					},
					{
						name: '收入',
						value: 'income',
					},
					{
						name: '支出',
						value: 'expense',
					}
				],
				current: 0,
				show: false,
				isShow: true,
				col: 4,
				startDate: '',
				endDate: '',
				obj: {
					type: 'commission',
					tab: 'all',
					list_rows: 6,
					page: 1,
					date: []
				},
				date: [],
				last_page:'',
				lists:[],
			}
		},
		onLoad() {
			var currentDate = new Date();
			this.startDate = this.formatDate(currentDate);
			this.date = [this.startDate, this.startDate];
			this.getDataList()
		},
		onReachBottom() {
			if (this.obj.page>this.last_page) {
				return
			}else{
				this.obj.page++
				this.getDataList()
			}
		},
		methods: {
			appendTimeHMS(arr) {
				return [arr[0] + '+00:00:00', arr[1] + '+23:59:59'];
			},
			all(){
				this.num=Number(this.userInfos.commission)
			},
			back(){
				getShopCommissionAgentTransfer({
					amount:this.num
				}).then(res=>{
					this.obj.page=1
					this.lists=[]
					if (res.code==1) {
						this.downPopupShow=false
						this.num=''
						this.getDataList()
						this.getUserInfo()
					}
				})
			},
			async getDataList() {
				this.obj.date = this.appendTimeHMS(this.date)
				let res = await getShopWalletLog(this.obj)
				if (res.code == 1) {
					this.listData = res.data
					this.lists=[...this.lists,...res.data.list.data]
					this.last_page=res.data.list.last_page
				}
			},
			//转余额
			downPopup() {
				this.downPopupShow = true
			},
			//提现
			withdraw() {
				uni.navigateTo({
					url: '/discountPage/withdraw/withdraw'
				})
			},
			formatDate(date) {
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2); // +1 because getMonth() is zero-based
				var day = ("0" + date.getDate()).slice(-2);
				return year + "-" + month + "-" + day;
			},
			changeFn(index) {
				this.obj.page=1
				this.lists=[]
				this.current = index;
				this.obj.tab=this.list[index].value
				this.getDataList()
			},
			getUserInfo() {
				getUserProfile().then(res => {
					this && this.$tn.vuex('userInfos', res.data)
				})
			},
			//确定
			change(e) {
				this.obj.page=1
				this.lists=[]
				if (e.startDate == e.endDate) {
					this.startDate = e.startDate
					this.endDate = ''
					this.date = [this.startDate, this.startDate];
				} else {
					this.startDate = e.startDate
					this.endDate = e.endDate
					this.date = [this.startDate, this.endDate];
				}
				this.getDataList()

			},

			commission() {
				uni.navigateTo({
					url: '/discountPage/wallet/wallet'
				})
			},
			recharge() {
				// this.tui.href('/pages/my/recharge/recharge')
				uni.navigateTo({
					url: '/templatePage/recharge/recharge'
				})
			},
			toggle() {
				this.isShow = !this.isShow
			},
			records() {
				// this.tui.href('/pages/my/records/records')
				uni.navigateTo({
					url: '/templatePage/records/records'
				})
			},
			bankCard() {
				this.tui.href('/pages/my/bankCard/bankCard')
			},
			coupon() {
				this.tui.href('/pages/my/myCoupon/myCoupon')
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/templatePage/records/records'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.list-view {
		border-bottom: 1px solid rgba(119, 119, 119, 0.25);
	}

	.header {
		background: url('https://oss.taoding1688.com/static/uniapp/static/title1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.tui-wallet__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.container {
		padding-bottom: 48rpx;
		background: #fff;
		min-height: 100vh;
		background: #f6f6f6;

	}



	.tui-content__box {
		width: 100%;
		/* height: 360rpx; */
		border-radius: 30rpx;
		/* padding: 20rpx 0; */
		/* padding: 0 30rpx 50rpx 30rpx; */
		box-sizing: border-box;
		background: #e9b461;
		position: relative;
		padding: 20rpx 10rpx;
	}

	.tui-my__assets {
		/* width: 100%; */
		color: #fff;
		font-size: 26rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-my__assets image {
		width: 36rpx;
		height: 28rpx;
		margin-left: 16rpx;
		display: block;
	}
</style>